<template>
  <!-- 永续合约开仓页 -->
  <div class="perpetual-open">
    <div class="pt-2 pb-10">
      <div class="flex">
        <div class="w-full flex flex-col">
          <p class="status-info" v-if="chartData.market && chartData.market.status">
            <span>{{ chartData.market.status && $t(chartData.market.status) }},</span>
            <span class="time">{{ chartData.market.time_str }}</span>&nbsp;
            <span>{{ chartData.market.time_zone && $t(chartData.market.time_zone) }}</span>
          </p>
          <div>
            <div class="flex-1 pb-5 font-16 font-700">{{ $t('现价') }} <span class="text-red ">{{ price || '--'
            }}</span></div>
            <div class="flex textColor font-16 borderColor items-center h-40" style="border-radius:4px;">
              <div class="flex-1 text-center lh-40" style="border-top-left-radius:4px;border-bottom-left-radius:4px;"
                :class="currentType == 'long' ? 'bg-green' : ''" @click="changeTab('long')">{{ $t('buy') }}</div>
              <div class="flex-1 text-center lh-40" style="border-top-right-radius:4px;border-bottom-right-radius:4px;"
                :class="currentType == 'short' ? 'bg-red' : ''" @click="changeTab('short')">{{ $t('sell') }}</div>
            </div>
            <div class="flex justify-between h-30 items-center mt-10">
              <span class="textColor3 font-14">{{ $t('time') }}</span>
              <span class="textColor3">{{ timeStr }}</span>
            </div>
            <div class="flex justify-between h-30 items-center">
              <span class="textColor3 font-14">{{ $t('tradingAssets') }}</span>
              <span class="textColor3 font-14" style="color:#d6cc62;">USD</span>
            </div>
            <div class="flex justify-between h-30 items-center">
              <span class="textColor3 font-14">{{ $t('可用数量') }}</span>
              <span class="textColor3">{{ nan(initFutrue.amount) }}</span>
            </div>
            <div class="flex justify-between h-30 items-center mb-8">
              <span class="textColor3 font-14">{{ $t('transactionPeriod') }}</span>
            </div>
            <div v-if="!initFutrue.para" class="h-40"></div>
            <contract-futrue v-else :initFutrue="initFutrue" @paraId="onParaId" :key="initFutrue.para" />
            <div class="flex justify-between h-30 items-center">
              <span class="textColor3 font-14">{{ $t('number') }}</span>
            </div>
          </div>
          <div class="flex items-center border-main h-38 lh-38 rounded-lg">
            <input :placeholder="$t('最小金额') + buyMin" class="border-none rounded-xl text-center textColor w-full h-full"
              v-model="form.amount" />
          </div>
          <div class="flex items-center mt-10 textColor1">
            <span :class="[tabIndex == 0 ? 'active' : '']" class="flex-1 text-center border-main rounded-lg mr-5 py-6"
              @click="selectMount(0.25, 0)">25%</span>
            <span :class="[tabIndex == 1 ? 'active' : '']" class="flex-1 text-center border-main rounded-lg mr-5 py-6"
              @click="selectMount(0.5, 1)">50%</span>
            <span :class="[tabIndex == 2 ? 'active' : '']" class="flex-1 text-center border-main rounded-lg mr-5 py-6"
              @click="selectMount(0.75, 2)">75%</span>
            <span :class="[tabIndex == 3 ? 'active' : '']" class="flex-1 text-center border-main rounded-lg py-6"
              @click="selectMount(1, 3)">100%</span>
          </div>
          <div class="flex justify-between h-30 items-center mt-10">
            <span class="textColor3 font-24">{{ $t('minimumBuy') }}</span>
            <span class="textColor3">{{ initFutrue.para && initFutrue.para[0] ? initFutrue.para[paraIndex].buy_min
              : '' }}</span>
          </div>
          <div class="flex font-24 textColor3 justify-between mt-10">
            <div>{{ $t('free') }}</div>
            <div class="textColor">{{ ((form.amount * (initFutrue && initFutrue.para && initFutrue.para[0] ?
              initFutrue.para[paraIndex].unit_fee
              : ''))).toFixed(2) }} USD
            </div>
          </div>
          <template v-if="userStore.userInfo.token">
            <div class="w-full h-40 lh-40 bg-green flex text-white rounded-md mt-20" v-if="currentType == 'long'"
              @click="order('long')">
              <div class="font-16 relative text-center" style="flex-grow:1;">
                {{ $t('buyLong') }}
              </div>
            </div>
            <div class="w-full h-40 lh-40 bg-red flex text-white rounded-md mt-20" v-if="currentType == 'short'"
              @click="order('short')">
              <div class="relative font-16 text-center" style="flex-grow:1;">
                {{ $t('buyShort') }}
              </div>
            </div>
          </template>
          <div v-else class="w-full mt-60">
            <div class="textColor">
              <p>{{ $t('套期保值，风险对冲') }}</p>
              <p class="pt-8">{{ $t('登陆后继续') }}</p>
            </div>
            <div class="h-40 lh-40 btnBackground flex rounded-md justify-center mt-50" @click="$router.push('/login')">{{
              $t('logIn') }}</div>
          </div>
        </div>
        <!-- <div class="ml-15 flex-1">
          <div class="flex-1 flex justify-between pt-5 pb-5 font-14" v-for="(item, index) in greenData" :key="index"
            @click="onQuickPrice(item.price)" :style="{
              'background': `linear-gradient(to right, '#ffffff'} 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) 100%)'
            }">
            <div class="text-green">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib' || symbol == 'btt'">{{ fixDate(item.amount, $i18n) ||
              '--' }}</div>
            <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
          </div>
          <div class="flex-1 text-red pt-5 pb-5 font-16 font-700 text-center">{{ price || '--' }}</div>
          <div class="flex-1 flex justify-between pt-5 pb-5 font-14" v-for="(item, index) in redData" :key="item + index"
            @click="onQuickPrice(item.price)" :style="{
              'background': `linear-gradient(to right, '#ffffff'} 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) 100%)'
            }">
            <div class="text-red ">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib' || symbol == 'btt'">{{ fixDate(item.amount, $i18n) ||
              '--' }}</div>
            <div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
          </div>
        </div> -->
      </div>
    </div>
    <van-popup v-model:show="show" class="rounded-2xl" teleport="body">
      <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
        @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
    </van-popup>
  </div>
</template>

<script setup>
import ContractFutrue from '@/components/foreign/foreign-contract-futrue/selectTime.vue'
import PopupDelivery from '@/components/foreign/foreign-popup-delivery/index.vue'
import { Popup, showToast } from 'vant';
import { ref, onMounted, computed, onUnmounted, watch } from "vue";
import { useUserStore } from '@/store/user';
import { _getBalance } from '@/service/user.api.js'
import { _orderOpen, _futrueOrder, _futrueOrderDetail, _futrueOrderInit } from "@/service/trade.api.js";
import { fixDate } from '@/utils/index'
import { SET_USERINFO } from '@/store/types.store'
import { useQuotesStore } from '@/store/quotes.store';
import { useI18n } from "vue-i18n";
import { WS_URL } from '@/config'
const quotesStore = useQuotesStore()
const { t } = useI18n()
import { useRouter, useRoute } from "vue-router";
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const emits = defineEmits(['changeCurrentType', 'ordered'])

const props = defineProps({
  greenData: { // 买单
    type: Array,
    default() {
      return []
    }
  },
  redData: { // 卖单
    type: Array,
    default() {
      return []
    }
  },
  symbol: {
    type: String,
    default: ''
  },
  price: {
    type: [Number, String],
    default: '0.00'
  },
  initOpen: {
    type: Object,
    default() {
      return {}
    }
  },
  initFutrue: {
    type: Object,
    default() {
      return {}
    }
  },
  currentType: {
    type: String,
    default: 'long'
  }
})

let currentBuyType = ref('') // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
let timeout = ref(null)
let timer = ref(null)
let detailData = ref({}) // 交割合约订单详情数据
let show = ref(false)
let popType = ref('confirm') // 弹框类型 confirm / counting
let showOptions = ref(false)
let paraIndex = ref(0)
let form = ref({
  symbol: '', // 币种
  session_token: '',
  direction: 'buy', // 买or卖
  price_type: 'opponent', // 市价or限价
  lever_rate: 1, // 杠杆
  price: '',
  amount: '', // 数量
  para_id: '' // 交割周琦id
})
let timeStr = ref('')
let tabIndex = ref(-1)
let buyMin = ref(0)
let sockets = null
let chartData = ref({})

const nan = computed(() => {
  return (val) => {
    return isNaN(val) ? '--' : val
  }
})

watch(props.price, () => {
  form.value.para_id = props.initFutrue.para && props.initFutrue.para[paraIndex.value].para_id
})
onMounted(() => {
  currentTime()
  startQuoteSocket()
})

onUnmounted(() => {
  clearTimeoutFn()
  clearInterFn()
  sockets && sockets.close()
  sockets = null
})


const currentTime = () => {
  timer.value = setInterval(getCurrentTime, 500);
}

const getCurrentTime = () => {
  let myDate = new Date();
  let h = myDate.getHours() <= 9 ? '0' + myDate.getHours() : myDate.getHours(); // 获取当前小时数(0-23)
  let m = myDate.getMinutes() <= 9 ? '0' + myDate.getMinutes() : myDate.getMinutes(); // 获取当前分钟数(0-59)
  let s = myDate.getSeconds() <= 9 ? '0' + myDate.getSeconds() : myDate.getSeconds();// 获取当前秒数(0-59)
  timeStr.value = h + ':' + m + ':' + s;
}

const selectMount = (rate, index) => {
  tabIndex.value = index
  if (props.initFutrue.amount == 0 || props.initFutrue.amount == '') {
    form.value.amount = 0
  } else {
    form.value.amount = props.initFutrue.amount * rate
  }
}

const continueTobuy = (detailData) => {
  show.value = false
  // setTimeout(() => {
  //   router.push(`/trendDetails/${detailData.symbol}?direction=${detailData.direction}`)
  // }, 300);
}

const onQuickPrice = (price) => { // 点击金额变化
  form.value.price = price
}

const clearTimeoutFn = () => {
  clearTimeout(timeout.value)
  timeout.value = null
}
const clearInterFn = () => {
  clearInterval(timer.value)
  timer.value = null
}
const handleTimeEnd = (order) => {
  _futrueOrderDetail(order).then(data => {
    clearTimeoutFn()
    detailData.value = data
    if (data.state !== 'created') {
      timeout.value = setTimeout(() => {
        handleTimeEnd(order)
      }, 1000)
    }
  })

}

const handleChoose = (item) => {
  showOptions.value = !showOptions.value
  form.value.lever_rate = item.lever_rate
  console.log('handleChoose')
}

const onParaId = ({ id, index }) => { // 交割日期

  if (props.initFutrue && props.initFutrue.para.length > 0) {
    buyMin.value = props.initFutrue.para[index].buy_min
    console.log(buyMin.value)
  } else {
    buyMin.value = 0
  }
  form.value.para_id = id
  form.value.amount = ''
  paraIndex.value = index
}

//选择开仓类型
const changeTab = (type) => { // 开仓和
  console.log('changeTab', type)
  // TODO: 这里应该是换函数
  if (props.currentType === type) {
    return
  }
  emits('changeCurrentType', type)
}

const onClose = () => { // 关闭
  show.value = false
  setTimeout(() => {
    popType.value = 'confirm'
  }, 500)
}

const order = (type) => {
  if (!userStore.userInfo.token) {
    router.push('/login')
    return false;
  }
  if (!form.value.amount) {
    showToast(t('请输入金额'))
    return
  }

  form.value.symbol = route.params.symbol
  form.value.direction = type === 'long' ? 'buy' : 'sell'
  let _order = null // api
  let emitFunc = null // 触发函数
  // 交割合约
  form.value.session_token = props.initFutrue.session_token
  _order = _futrueOrder
  emitFunc = 'futrue'
  if (props.initFutrue.session_token == undefined || props.initFutrue.session_token == '') {
    _futrueOrderInit(props.symbol).then(data => {
      form.value.session_token = data.session_token;
      openOrder(_order, emitFunc);
    }).catch((err) => {
      if (err.code == 'ECONNABORTED') { showToast(t('网络超时！')); }
      else if (err.msg != undefined) { showToast(t(err.msg)); }
    });
  }
  else {
    form.value.session_token = props.initFutrue.session_token;
    openOrder(_order, emitFunc);
  }

}

const openOrder = (_order, emitFunc) => {
  _order(form.value).then((res) => {
    form.value.amount = ''
    showToast(t('success'))
    _getBalance().then(data => { // 刷新余额
      quotesStore[SET_USERINFO, { balance: data.money }]
    })
    emits('ordered', emitFunc)
    _futrueOrderDetail(res.order_no).then(data => {
      detailData.value = data
      show.value = true
    })
  }).catch(() => { // 也需要重新初始化
    emits('ordered', emitFunc)
  })
}
const startQuoteSocket = () => { // 行情socket
  sockets = new WebSocket(`${WS_URL}/1/${route.params.symbol}`)
  // socket.onopen =  () => {
  //     console.log('open')
  //     socket.send('hello')
  // }
  sockets.onmessage = (evt) => {
    const { data } = evt
    const { code, data: _data } = JSON.parse(data)
    if (code / 1 === 0) {
      chartData.value = _data[0] ?? {}
    }
  }
}

</script>

<style lang="scss" scoped>
@import '@/assets/css/copy.scss';

.perpetual-open {
  font-size: 14px;
}

.options {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  border-radius: 6px;

  div {
    font-size: 22px;
    text-align: center;
    width: 140px;
    height: 50px;
    line-height: 50px;

    &.option-active {
      background-color: $light-grey;
    }
  }
}

.right-word {
  top: 50%;
  transform: translateY(-50%);
  right: 19px;
  position: absolute;
  border-radius: 6px;
}

// 开仓样式
.tabcon {
  // padding-bottom: 16%;
  position: relative;
  height: 80px;
}

.tab {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  background-color: $border-grey;
  border-radius: 5px;
  overflow: hidden;
}

.tab>* {
  height: 100%;
}

.tab>img {
  margin-left: -2px;
  margin-right: -2px;
}

.tab>a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.long {
  background-color: #04cf99;
  color: white;
}

.short {
  background: #f36464;
}

// 下拉
.option-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;
  background-color: $light-grey;
  text-align: center;
  box-shadow: 0px 0px 3px 3px $border-grey;
  border-radius: 4px;
  color: $light-grey;
  z-index: 10;
}

.option-box>div {
  padding: 30px 0;
}

.option-box>div:hover {
  background-color: $light-grey;
}

.num-text-color {
  color: #4C4A54;
}

select {
  appearance: none;
  /* 去掉默认图标 */
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  padding: 0 20px 0 20px;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
  /* 自己的图*/
  background-size: 20px 11px;
}

.with100 {
  width: 100%;
}

.height100 {
  height: 100%;
}

.border-left-half {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.border-right-half {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.border-main {
  border: 1px solid $border_color;
  border-radius: 4px;
}

// .borderColor {
//   border: 1px solid #ccc;
// }

.btnBackground {
  background: $tab_background;
  color: $text_color;
}

.rounded-lg {
  input {
    background: transparent;
  }
}

.active {
  color: $text_color;
}
.status-info {
    padding: 0 6px;
    font-size: 12px;
    line-height: 32px;
    height: 32px;
    border-bottom: 1px solid $border_color;

    .time {
      display: inline-block;
      width: 92px;
    }
  }
</style>
